<template>
  <div
    class="mx-auto self-center w-full transition-transform shadow-lg hover:scale-105 duration-200"
  >
    <video
      draggable="false"
      :src="fileStore.curFileInfo.url"
      :alt="fileStore.curFileInfo.name"
      controls
      autoplay
      @loadeddata="loadHandle"
    />
  </div>
</template>

<script setup>
import { useFileStore, useFlagStore } from '@/stores'
const fileStore = useFileStore()
const flagStore = useFlagStore()
onMounted(() => {
  flagStore.setPreviewSpinner(true)
})
const loadHandle = () => {
  flagStore.setPreviewSpinner(false)
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
